<template>
  <div class="content">
    <div>
      <button @click="add">添加</button>
    </div>
    <div>
      <button @click="del">删除</button>
    </div>
    <div class="wraps">
      <!-- 动画属性和周期函数都跟transition一样
      tag 属性可以设置包裹的标签类型，默认是div -->
      <transition-group
        tag="div"
        leave-active-class="animate__animated animate__bounceOut"
        enter-active-class="animate__animated animate__bounceIn"
      >
        <div class="item" v-for="item in list" :key="item">{{ item }}</div>
      </transition-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import "animate.css"

const list = ref<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const add = () => {
  list.value.push(list.value.length + 1)
}

const del = () => {
  list.value.pop()
}

</script>

<style lang="scss" scoped>
  .wraps {
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
    border: 1px solid #ddd;
    .item {
      margin: 10px;
    }
  }
</style>